<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/src/styles/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pandorust</title>
    <script type="module" src="/src/main.ts" defer></script>
</head>
<body>
<div id="app-container">
    <nav id="sidebar">
        <div class="sidebar-header">
            <h1 class="sidebar-logo">P</h1>
            <h1 class="sidebar-logo-full">Pandorust</h1>
            <button id="sidebar-toggle-btn" title="Toggle Sidebar">
                <span data-icon-id="arrow-left" class="icon"></span>
            </button>
        </div>
        <ul class="nav-list">
            <li class="nav-item" data-navigo>
                <a href="/quick-find">
                    <span data-icon-id="search" class="icon"></span>
                    <span class="nav-label">Quick Find</span>
                </a>
            </li>
            <li class="nav-item" data-navigo>
                <a href="/project-cleanser">
                    <span data-icon-id="project-cleanser-tag" class="icon"></span>
                    <span class="nav-label">Project Cleanser</span>
                </a>
            </li>
        </ul>
    </nav>

    <main id="main-content"></main>
</div>

<button id="theme-toggle-btn">
    <span data-icon-id="light" class="light-icon"></span>
    <span data-icon-id="dark" class="dark-icon"></span>
</button>
</button>
</body>
</html>